<template>
  <div class="cart-item">
    <span class="item-name">{{ item.name }}</span>
    <span class="item-price">¥{{ item.price }}</span>
    <div class="quantity-control">
      <button @click="decrement">-</button>
      <span class="quantity">数量：{{ item.quantity }}</span>
      <button @click="increment">+</button>
    </div>
    <button class="remove-btn" @click="removeItem">删除</button>
  </div>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      required: true
    }
  },
  methods: {
    increment() {
      this.$store.dispatch('incrementQuantity', this.item.id)
    },
    decrement() {
      this.$store.dispatch('decrementQuantity', this.item.id)
    },
    removeItem() {
      this.$store.dispatch('removeItem', this.item.id)
    }
  }
}
</script>

<style scoped>
.cart-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.quantity-control {
  display: flex;
  align-items: center;
}

.quantity-control button {
  margin: 0 5px;
  padding: 2px 8px;
}

.remove-btn {
  color: red;
  background: none;
  border: none;
  cursor: pointer;
}
</style>